<template>
  <div>
    <!-- <video v-if="value" :src="value" autoplay controls />
    <el-upload
      v-else
      class="upload-demo"
      drag
      :action="baseURL + '/question/upload'"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      multiple
    >
      <div>
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </div>
    </el-upload> -->
    <div class="video-upload-com">
      <el-upload :action="baseURL + '/question/upload'" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
        <el-button v-if="value===''" size="mini" type="primary">点击上传视频</el-button>
      </el-upload>
      <div v-if="value">
        <video :src="value" style="width:320px;height:200px;" controls="controls">您的浏览器不支持视频播放</video>
      </div>
      <el-button v-if="value" size="mini" type="primary" @click="delEvent">删除</el-button>
    </div>
  </div>

</template>

<script>
export default {
  name: 'UploadVideo',
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      typeName: '',
      //   imageUrl: '',
      baseURL: process.env.VUE_APP_BASE_API
    }
  },

  methods: {
    handleAvatarSuccess(res, file) {
      this.$emit('input', this.baseURL + '/' + res.data.url)
    },
    beforeAvatarUpload(file) {
      console.log(file)
      this.typeName = file.name
      const isJPG = file.type === 'video/mp4' || file.type === 'video/avi' || file.type === 'video/wmv' || file.type === 'video/mpg' || file.type === 'video/quicktime'
      const isLt8M = file.size / 1024 / 1024 < 8

      if (!isJPG) {
        this.$message.error('上传视频只能是 mp4,avi,wmv,mpg,mov 格式!')
      }
      if (!isLt8M) {
        this.$message.error('上传头像视频大小不能超过 8MB!')
      }
      return isJPG && isLt8M
    },
    delEvent() {
      this.$emit('input', '')
    }
  }
}
</script>
  <style lang="scss" scoped>

  </style>
